<template>
  <dialog-table
    ref="selector"
    :request="getList"
    :load="getLoad"
    :table-column="tableColumn"
    :column-option="{ label: 'levelName', value: 'id' }"
    :request-params="_requestParams"
    v-bind="$attrs"
  >
    <template #form>
      <!-- 查询条件 -->
      <j-border>
        <j-form bordered>
          <j-form-item v-if="$utils.isEmpty(requestParams.level)" label="等级">
            <a-input v-model:value="searchParams.level" allow-clear />
          </j-form-item>
          <j-form-item v-if="$utils.isEmpty(requestParams.levelName)" label="等级名称">
            <a-input v-model:value="searchParams.levelName" allow-clear />
          </j-form-item>
          <j-form-item v-if="$utils.isEmpty(requestParams.upgradeType)" label="升级方式">
            <a-select v-model:value="searchParams.upgradeType" placeholder="全部" allow-clear>
              <a-select-option
                v-for="item in $enums.LEVEL_UPGRADE_TYPE.values()"
                :key="item.code"
                :value="item.code"
                >{{ item.desc }}</a-select-option
              >
            </a-select>
          </j-form-item>
          <j-form-item v-if="$utils.isEmpty(requestParams.available)" label="状态">
            <a-select v-model:value="searchParams.available" placeholder="全部" allow-clear>
              <a-select-option
                v-for="item in $enums.AVAILABLE.values()"
                :key="item.code"
                :value="item.code"
                >{{ item.desc }}</a-select-option
              >
            </a-select>
          </j-form-item>
        </j-form>
      </j-border>
    </template>

    <!-- 工具栏 -->
    <template #toolbar_buttons>
      <a-space class="operator">
        <a-button type="primary" @click="$refs.selector.search()">
          <template #icon>
            <SearchOutlined />
          </template>
          查询</a-button
        >
      </a-space>
    </template>
  </dialog-table>
</template>
<script>
  import { defineComponent } from 'vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import * as api from '@/api/base-data/member-level';

  export default defineComponent({
    name: 'MemberLevelSelector',
    components: { SearchOutlined },
    props: {
      requestParams: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        searchParams: {
          level: null,
          levelName: null,
          upgradeType: null,
          available: this.$enums.AVAILABLE.ENABLE.code,
        },
        tableColumn: [
          { field: 'level', title: '等级', width: 80 },
          { field: 'levelName', title: '等级名称', width: 120 },
          { field: 'upgradeDesc', title: '升级描述', minWidth: 240 },
          {
            field: 'upgradeCondition',
            title: '升级条件',
            width: 120,
            formatter: ({ cellValue }) => {
              return cellValue <= 0 ? '无条件' : cellValue;
            },
          },
          { field: 'upgradeDesc', title: '升级描述', minWidth: 240 },
          {
            field: 'effectiveDay',
            title: '有效天数',
            width: 80,
            formatter: ({ cellValue }) => {
              return cellValue <= 0 ? '永久' : cellValue + '天';
            },
          },
          {
            field: 'available',
            title: '状态',
            width: 80,
            slots: { default: 'available_default' },
          },
        ],
      };
    },
    computed: {
      _requestParams() {
        return { available: true, ...this.searchParams, ...this.requestParams };
      },
    },
    methods: {
      getList(params) {
        return api.selector({
          ...params,
          available: true,
          ...this.searchParams,
          ...this.requestParams,
        });
      },
      getLoad(ids) {
        return api.loadMember(ids);
      },
    },
  });
</script>

<style lang="less"></style>
